<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script type="text/javascript" src="/pages/js/jquery.min.js"></script>

  <script type="text/javascript">
    $(function () {

        /**
         * 图片上传
         */
        $("#upload").click(function () {
            var formData = new FormData();
            formData.append('upload', $('#file')[0].files[0]);
            $.ajax({
                url: '/upload/image',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                contentType: false
            }).done(function (res) {
                if(res.status===1){
                    $("#headerDiv").html('<img src="'+res.data+'">');
                    $("#header").val(JSON.stringify(res.data));
                }
                else{
                    alert("图片上传失败");
                }
            }).fail(function (res) {

            });
        });


        /**
         * 查看用户信息
         */
        $.post("/user/detail", {}, function (result) {
            if (result.status === 1) {
                var data = result.data;
                $("#header1").html('<img id="header" src="'+data.header+'">');
                $("#nickName1").html(data.nickName);
                $("#studentId1").html(data.studentId);
                $("#headerDiv").html('<img src="'+data.header+'">');
                $("#header").val(data.header);
                $("#nickName").val(data.nickName);
                $("#studentId").val(data.studentId);
                $("#gender").val(data.gender);
                $("#mobile").val(data.mobile);
                $("#qq").val(data.qq);
                $("#weixin").val(data.weixin);
                $("#email").val(data.email);
                $("#parentMobile").val(data.parentMobile);
            }else{
                alert("用户未登录");
                window.location.href="/pages/index.html";
            }
        });

        //保存用户信息
        $("#editinfo").click(function () {
            var url = "/user/edit";
            var nickName= $("#nickName").val();
            var header = $("#header").val();
            var gender = $("#gender").val();
            var email = $("#email").val();
            var qq = $("#qq").val();
            var weixin = $("#weixin").val();
            var parentMobile = $("#parentMobile").val();
            var studentId = $("#studentId").val();

            $.post(url, {
                nickName: nickName,
                header: header,
                gender: gender,
                email: email,
                qq: qq,
                weixin: weixin,
                parentMobile: parentMobile,
                studentId: studentId
            }, function (result) {
              if(result.data===1){
                alert("保存成功");
                window.location.href="/pages/ymdx/users/information.html"
              }else{
                alert("保存失败");
              }
          })
        });
      })
    </script>

  <title>壹码当先 - 编辑个人信息</title>
  <link href="/pages/css/kefu.css" rel="stylesheet">
  <script type="text/javascript" src="/pages/js/jquery001.js"></script>
  <!-- Chosen CSS -->
  <link href="/pages/css/login-register.css" rel="stylesheet">
  <!-- Pretty Photo CSS -->
  <link href="/pages/css/prettyPhoto.css" rel="stylesheet">
  <!-- Chosen CSS -->
  <link href="/pages/css/chosen.min.css" rel="stylesheet">
  <!-- Chosen CSS -->
  <link href="/pages/css/dashboard.css" rel="stylesheet">
  <!-- Custom Main StyleSheet CSS -->
  <link href="/pages/style.css" rel="stylesheet">
  <!-- Color CSS -->
  <link href="/pages/css/color.css" rel="stylesheet">
  <link href="/pages/css/color-2.css" rel="stylesheet">
  <!-- Responsive CSS -->
  <link href="/pages/css/responsive.css" rel="stylesheet">

  </head>

<body onload="IFrameResize()">

    <script type="text/javascript">
    function IFrameResize(){  
     //alert(this.document.body.scrollHeight); //弹出当前页面的高度  
     var obj = parent.document.getElementById("iframe1");  //取得父页面IFrame对象  
     //alert(obj.height); //弹出父页面中IFrame中设置的高度  
     obj.height = this.document.body.scrollHeight;  //调整父页面中IFrame的高度为此页面的高度       
    }  
    </script>

    <!--Sub Banner Wrap Start -->
    <div class="gt_sub_banner_bg default_width">
        <div class="container">
            <div class="gt_sub_banner_hdg  default_width">
                <h2>编辑个人信息</h2>
                <h6>壹码当先&nbsp;·&nbsp;让更多的孩子爱上编程</h6>
            </div>
        </div>
    </div>
    <!--Sub Banner Wrap End -->
    <!--Breadcrumb Wrap End -->
    <div class="gt_breadcrumb_bg default_width">
      <div class="container">
        <div class="gt_breadcrumb_wrap default_width">
            <ul>
                <li><a href="/pages/index.html">首页</a></li>
                <li><a href="/pages/ymdx/users/information.html">个人信息</a></li>
                <li><a href="#">编辑个人信息</a></li>
            </ul>
        </div>
      </div>
    </div>
    <!--Breadcrumb Wrap End -->

    <!--Main Content Wrap Start-->
    <div class="gt_content_wrap">
      <!--Classes Wrap Start-->
      <section class="gt_courses_bg">
        <div class="container">
          
          <!-- Dashboard Side Bar Wrap Start -->
          <div class="col-md-4">
            <div class="gt-user-sidebar">
              <div class="gt_d_author_wrap">
                <div class="gt_d_author_pic">
                  <figure id="header1">
                    <!--用户头像-->
                  </figure>
                </div>
                <div class="gt_d_author_pic_des">
                  <h5 id="nickName1"></h5>
                  <span class="gt_hdg_span"></span>
                  <p>学员号</p>
                  <label id="studentId1"></label>
                </div>
              </div>
              <div class="gt-usser-account-list">
                <ul>
                  <li><a href="/pages/ymdx/users/information.html"><i class="icon-book gt-color"></i>个人信息</a></li>
                  <li><a href="/pages/ymdx/users/myworks.html"><i class="icon-clock-1 gt-color"></i>我的作品</a></li>
                  <li><a href="/pages/ymdx/users/editpwd.html"><i class="icon-three gt-color"></i>修改密码</a></li>
                </ul>
                <a href="#" class="gt-logout"><i class="icon-arrows-2 gt-color"></i>退出登录</a>
              </div>
            </div>
          </div>
          <!-- Dashboard Side Bar Wrap End -->


          <!--Classes List Wrap Start-->
          <div class="col-md-8">
            <div class="gt_d_classes_wrap default_width mb20">
              <h4 class="gt_d_title">编辑个人信息</h4>
              <div class="gt_d_profile_setting default_width">
                <div class="row">
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <input id="nickName" class="c_ph" type="text" placeholder="姓名：">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <select id="gender" class="gt_d_privacy_dd">
                           <option>性别</option>
                           <option value="男">男</option>
                           <option value="女">女</option>
                       </select>
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <input id="mobile" readonly class="c_ph" type="text" placeholder="手机号：" >
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <input id="qq" class="c_ph" type="text" placeholder="QQ：">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <input id="weixin" class="c_ph" type="text" placeholder="微信：">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <input id="email" class="c_ph" type="text" placeholder="邮箱：">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <input id="parentMobile" class="c_ph" type="text" placeholder="家长电话：">
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width mb20">
                      <input id="studentId" class="c_ph" type="text" placeholder="学员号：">
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-md-5">
                  <h4 class="gt_d_title">上传头像</h4>
                    <input id="file" type="file"/>
                    <button id="upload" type="button" style="height: 25px; margin-top: 10px; margin-bottom: 10px; width: 80px; background-color: #E1E1E1;">点击上传</button>
                    <div class="gt_d_upload_photo default_width">
                    <div class="gt_d_upload_area default_width" id="headerDiv">
                    </div>
                    <input id="header" value="" hidden>
                    <span>最大图片尺寸: <em>10.00 MB</em></span>
                    <span>规模：<em>370x377</em></span>
                    <span>支持格式：<em>JPG,JPEG,PNG,GIF</em></span>
                  </div>
                </div>
              </div>

              <div class="gt_d_scl_setting default_width">
                <div class="row">
                  <div class="col-md-6">
                    <div class="gt_privacy_field default_width">
                      <input id="editinfo" type="submit" value="保存" style="background-color: #0177b5;">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!--Classes List Wrap End-->
        </div>
      </section>
      <!--Classes Wrap End-->
    </div>
    <!--Main Content Wrap End-->



  <!--Jquery Library-->
  <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
  <!--Bootstrap core JavaScript-->
  <script src="http://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>
  <!--Chosen JavaScript-->
  <script src="/pages/js/chosen.jquery.min.js"></script>
  <!--Custom JavaScript-->
  <script src="/pages/js/custom.js"></script>

</body>
</html>
